<template>
  <div class="address-page flex-col">
    <navbar :back="isBack" title="" @goBack="goBack"/>

    <scroll-view class="address-container flex-1" scroll-y>
      <div class="goods-info-holder flex-col-v-center" v-for="item in order.order_info_list" :key="item.id">
        <div class="goods-info-box flex-1">
          <div class="goods-info flex-row">
            <img :src="item.cover_img_url" modd="aspectFit"/>
            <div class="goods-right flex-1 flex-col-space-between">
              <div class="title-txt">
                {{item.goods_name}}
              </div>
              <div class="spec-box"> {{item.goods_spec_name}}</div>
              <div class="price-row flex-row-v-center">
                <label class="price-text">￥{{item.goods_price/100}}</label>
                <label class="count">x {{item.amount}}</label>
              </div>

            </div>

          </div>
        </div>
      </div>

      <div class="success-box flex-col-v-center">
        <div class="success-txt">成功付款</div>
        <div class="money-txt">¥{{order.processCharge}}</div>
        <div class="success-btn flex-center" @click="goToOrderDetailPage">查看订单</div>
        <div class="back-home" @click="goHome">返回首页</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import global from 'global'
  import navbar from '@/components/navbar'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,
        isBack: true,

        order: {}
      }
    },

    onShow () {
      let sn = this.$root.$mp.query['order_sn']
      this._getOrderDetailBySn(sn)
    },

    methods: {
      goBack () {
        Core.Util.goBack()
      },

      goHome () {
        Common.reLaunchGo('/pages/产品中心/main')
      },

      goToOrderDetailPage () {
        Common.goRedirect(`/pages/订单详情/main?order_id=${this.order.id}`)
      },

      _getOrderDetailBySn (sn) {
        Core.Api.Order.orderDetailBySn(sn)
          .then(res => {
            let order = res.order
            order.processCharge = Core.Util.processMoney(order.charge)
            this.order = order
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .address-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .address-container {
      height: 100%;
      overflow-y: auto;
    }

    .goods-info-holder {
      background-color: #FFFFFF;
      padding: 0 12px;
      .goods-info-box {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px dashed rgb(213, 213, 213);

        .goods-info {
          img {
            width: 85px;
            height: 85px;
            margin-right: 10px;
            border: 1px solid #efefef;
            border-radius: 5px;
          }
          .title-txt {
            font-size: 14px;
            color: rgb(86, 86, 86)
          }
          .spec-box {
            padding: 4px 6px;
            font-size: 11px;
            color: #313131;
            background: #F9F9F9;
          }
          .goods-right {
            align-items: flex-start;
          }
          .price-row {
            width: 100%;
            justify-content: space-between;
            align-items: flex-end;
            .price-text {
              color: #f93815;
              margin-right: 20px;
            }
            .count {
              font-size: 13px;
              color: #3c3c3F;
            }
          }
        }
      }
    }

    .success-box {
      background-color: #FFFFFF;
      padding: 20px 0;
      .success-txt {
        font-size: 19px;
      }
      .success-btn {
        margin-top: 10px;
        width: 200px;
        height: 40px;
        border-radius: 20px;
        background-color: rgb(252, 122, 9);
        color: #FFFFFF;
      }
      .money-txt {
        margin-top: 10px;
        font-size: 18px;
        color: rgb(249, 56, 21);
      }
      .back-home {
        margin-top: 30px;
        color: rgb(200, 200, 200);
        text-decoration: underline;
      }
    }
  }
</style>
